<template>
  <div class="content">
    <div class="header">
      <div class="logo" @click="$router.back()">
        <span class="iconfont icon-zuo"></span>
        <span class="iconfont icon-new1"></span>
      </div>
      <div
        class="btn_follow"
        :class="{
          active: !postDetail.has_follow,
        }"
        @click="handelFollow"
      >
        {{ postDetail.has_follow ? "已关注" : "关注" }}
      </div>
    </div>
    <!-- 新闻详情 -->
    <div class="post" v-if="postDetail.type === 1">
      <div class="title">
        <h4>{{ postDetail.title }}</h4>
      </div>
      <div class="info">
        <span class="nickname">{{ postDetail.user.nickname }}</span>
        <span>{{ postDetail.create_date.split("T")[0] }}</span>
      </div>
      <div class="my_content" v-html="postDetail.content"></div>
    </div>
    <!-- 视频详情 -->
    <div class="video" v-if="postDetail.type === 2">
      <video
        controls
        width="100%"
        poster="https://timgmb04.bdimg.com/timg?searchbox_feed&quality=100&wh_rate=0&size=b576_324&ref=http%3A%2F%2Fwww.baidu.com&sec=1568739067&di=612dd27cae470b93b01a4b32ef72fbac&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Fe18c6ffa079441431f8988ca4c3ac106.jpeg"
        src="https://video.pearvideo.com/mp4/third/20200622/cont-1681607-11905134-155740-hd.mp4"
      ></video>
      <div class="info">
        <div class="user_img">
          <div>
            <img
              :src="$axios.defaults.baseURL + postDetail.user.head_img"
              alt=""
            />
          </div>
          <div class="nickname">{{ postDetail.user.nickname }}</div>
        </div>
        <div
          class="btn_follow"
          :class="{ active: !postDetail.has_follow }"
          @click="handelFollow"
        >
          {{ postDetail.has_follow ? "已关注" : "关注" }}
        </div>
      </div>
      <div class="title">
        {{ postDetail.title }}
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="btns">
      <div class="dianzan" @click="handelLike">
        <span
          class="iconfont icon-dianzan1"
          :class="{
            like: postDetail.has_like,
          }"
        ></span>
        {{ postDetail.like_length }}
      </div>
      <div class="weixin">
        <span class="iconfont icon-weixin"></span>
        微信
      </div>
    </div>
    <div class="comment_title">精彩跟帖</div>
    <Comment
      @callReply="callReply"
      v-for="(item, index) in commentList"
      :key="index"
      :item="item"
    />
    <div class="MoreCoommenT">
      <div
        class="btn"
        @click="$router.push('/morecomment/' + $route.params.id)"
      >
        更多跟帖
      </div>
    </div>
    <CommentInput ref="CommentInput" :parentID="commentId" />
  </div>
</template>

<script>
import Comment from "../comment/index";
import CommentInput from "../components/CommentInput";
export default {
  data() {
    return {
      postDetail: {
        user: {},
      },
      commentList: [],
      commentId: "",
    };
  },
  components: {
    Comment,
    CommentInput,
  },
  created() {
    // 获取文章
    const id = this.$route.params.id;
    console.log("文章id", id);
    this.$axios({
      url: "/post/" + id,
    }).then((res) => {
      console.log(res);
      const { data } = res.data;
      this.postDetail = data;
    });
    // 获取评论
    this.$axios({
      url: "/post_comment/" + id,
    }).then((res) => {
      console.log(res);
      this.commentList = res.data.data;
      if (this.commentList.length > 3) {
        this.commentList.length = 3;
      }
    });
  },
  methods: {
    handelFollow() {
      console.log("专注");
      const id = this.postDetail.user.id;
      if (this.postDetail.has_follow) {
        // 取消关注
        this.$axios({
          url: "/user_unfollow/" + id,
        }).then((res) => {
          const { message } = res.data;
          this.$toast.success(message);
          this.postDetail.has_follow = false;
        });
      } else {
        // 关注用户
        this.$axios({
          url: "/user_follows/" + id,
        }).then((res) => {
          console.log(res);
          const { message } = res.data;
          this.$toast.success(message);
          this.postDetail.has_follow = true;
        });
      }
    },
    // 文章点赞
    handelLike() {
      console.log("赞一下");
      this.$axios({
        url: "/post_like/" + this.postDetail.id,
      }).then((res) => {
        console.log(res);
        this.postDetail.has_like = !this.postDetail.has_like;
        if (this.postDetail.has_like) {
          this.postDetail.like_length += 1;
        } else {
          this.postDetail.like_length -= 1;
        }
        this.$toast.success(res.data.message);
      });
    },
    // 发布评论父组件事件
    callReply(id) {
      // 将id 存起来交给输入框组件
      this.commentId = id;
      // 调起输入框，输入框是 commmetInput 子组件的isShowTextarea 函数
      this.$refs.CommentInput.isShowTextarea();
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  padding: 5.556vw;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo {
      .icon-zuo {
        font-size: 3.889vw;
        color: #999;
      }
      .icon-new1 {
        font-size: 5vw;
      }
    }
    .btn_follow {
      font-size: 3.333vw;
      border: 0.278vw solid #ccc;
      padding: 0.556vw 2.778vw;
      border-radius: 4.167vw;
      box-sizing: border-box;
    }
  }
  .title {
    h4 {
      font-size: 5vw;
      margin: 6.944vw 0 2.778vw;
    }
  }
  .info {
    font-size: 3.889vw;
    color: #999;
    .nickname {
      margin-right: 2.778vw;
    }
  }
  .btns {
    text-align: center;
    margin-top: 8.333vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3.889vw;
    border-bottom: 1.111vw solid #ececec;
    padding-bottom: 5.556vw;
    .dianzan {
      width: 19.722vw;
      border: 0.278vw solid #ccc;
      padding: 0.556vw 1.667vw;
      border-radius: 4.167vw;
      margin-left: 13.889vw;
    }
    .weixin {
      width: 19.722vw;
      border: 0.278vw solid #ccc;
      padding: 0.556vw 1.667vw;
      border-radius: 4.167vw;
      margin-right: 13.889vw;
      .icon-weixin {
        color: #00c800;
      }
      .icon-dianzan1 {
        margin-left: 5px;
      }
    }
  }
  .video {
    margin-top: 20px;
    .info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .nickname {
        margin-left: 10px;
      }
      .user_img {
        display: flex;
        align-items: center;
        img {
          width: 25px;
          height: 25px;
          border-radius: 50%;
        }
      }
      .btn_follow {
        border: 1px solid #ececee;
        padding: 1px 12px;
        border-radius: 10px;
        font-size: 13px;
      }
    }
    .title {
      margin: 10px 0;
      font-size: 16px;
      color: #333;
    }
  }
  .active {
    background: red;
    border-color: red;
    color: white;
  }
  .like {
    color: red;
  }
}
/deep/.photo {
  img {
    max-width: 100%;
  }
}
.comment_title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}
.MoreCoommenT {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  .btn {
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    font-size: 14px;
    border-radius: 16px;
    color: #666;
    border: 1px solid #ccc;
  }
}
</style>
